const { resolve, join } = require('path')
const glob = require('glob')
const htmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')
const purgecssWebpackPlugin = require('purgecss-webpack-plugin')
const PATHS = { src: join(__dirname, 'src') }
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
// const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin')

module.exports = {
    entry: {
        main: './src/js/main.ts',
        index: './src/js/index.ts',
        detail: './src/js/detail.ts'
    },
    output: {
        filename: 'js/[name][hash:10].js',
        path: resolve(__dirname, 'dist')
    },
    module: {
        rules: [
	        {
		        // test 指定生效的文件
		        test: /\.ts$/,
		        // 要使用的 loader
		        use: [
			        // 配置babel
			        {
				        // 指定加载器
				        loader: 'babel-loader',
				        // 设置babel
				        options: {
					        // 设置自定义的环境
					        presets: [
						        [
							        // 指定环境的插件
							        "@babel/preset-env",
							        // 配置信息
							        {
								        // 要兼容的目标浏览器
								        targets: {
									        "chrome": "87"
								        },
								        // 指定 corejs的版本
								        "corejs": "3",
								        //	使用corejs的方式 "usage" 按需加载
								        "useBuiltIns": "usage"
							        }
						        ]
					        ]
				        }
			        },
			        'ts-loader'],  /* 可以是数组，从右到左执行 */
		        exclude: /node-modules/
	        },
            {
                test: /\.scss$/, use: [
                    {
                        loader: miniCssExtractPlugin.loader,
                        options: { publicPath: '../' }
                    }, 'css-loader', 'sass-loader', 'postcss-loader']
            },
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 10,
                    name: 'images/[name][hash:10].[ext]',  // 图片名字默认为哈希 [hash].[ext]
                    esModule: false
                }
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.pug$/, 
                use: ['html-loader','pug-html-loader']
            },
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),  // 打包时删除dist重新打包
        new htmlWebpackPlugin({
            template: './src/index.pug',  // 入口文件
            filename: 'index.html',  // 编译后的文件名
            chunks: ['main', 'index'],  // 指定引入的文件
            minify: {
                collapseWhitespace: false,
                removeComments: true
            }
        }),
        new htmlWebpackPlugin({
            template: './src/detail.pug',  // 入口文件
            filename: 'detail.html',  // 编译后的文件名
            chunks: ['main', 'detail'],  // 指定引入的文件
            minify: {
                collapseWhitespace: false,
                removeComments: true
            }
        }),
        new miniCssExtractPlugin({
            filename: 'css/[name][hash:10].css',  // 编译后的文件名
        }),
        new purgecssWebpackPlugin({
            paths: glob.sync(PATHS.src + '/**/*', { nodir: true })
        }),
        new CopyPlugin({
            patterns: [
                { from: 'src/plugin/bootstrap', to: 'bootstrap/'},
                { from: 'src/plugin/jquery', to: 'jquery/'},
                { from: 'src/plugin/swiper', to: 'swiper/'}
            ],
        }),
        // new HtmlWebpackTagsPlugin({
        //     tags: [
        //         // jquery
        //         'jquery/jquery.min.js',
        //         // bootstrap
        //         'bootstrap/css/bootstrap.min.css',
        //         'bootstrap/js/bootstrap.min.js',
        //         // swiper
        //         'swiper/swiper-bundle.min.css',
        //         'swiper/swiper-bundle.min.js',
        //     ],
        //     append: false
        // })
    ],
	// 用来设置模块
	resolve: {
		extensions: ['.ts', '.js', '.scss', '.pug']
	},
    target: 'web',
    devServer: {
        port: 3000, // 默认端口
        open: true,
    }
}